<!-- <template>
	{{ age }}
	<button @click="age++">change age</button>
</template>

<script>
import { ref, watch } from 'vue'
export default {
	setup() {
		const age = ref(18)
		watch(
			() => {
				// 返回你想要监听的响应式属性(ref产生的对象必须加.value)
				return age.value
			},
			() => {
				// 数据变化之后的回调函数
				console.log('age发生了变化')
			},
			{ immediate: true }
		)
		return {
			age,
		}
	},
}
</script> -->

<template>
	{{ name }}
	{{ info.age }}
	<button @click="name = 'tt'">change name</button>
	<button @click="info.age++">change age</button>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
export default {
	setup() {
		const state = reactive({
			name: 'cp',
			info: {
				age: 18,
			},
		})
		watch(
			() => {
				// 详细的告知你要监听谁
				return state.info.age
			},
			() => {
				// 数据变化之后的回调函数
				console.log('age发生了变化')
			}
		)
		watch(
			() => {
				// 详细的告知你要监听谁
				return state.name
			},
			() => {
				// 数据变化之后的回调函数
				console.log('name发生了变化')
			}
		)
		return {
			...toRefs(state),
		}
	},
}
</script>
